<template>
  <!-- 主体 -->
  <div class="main">
    <!-- 主体的布局 -->
    <el-container>
      <!-- 头部 -->
      <el-header class="mainNav">
        <div class="sortBody">
          <span>Sort by：</span>
          <span class="sortFeatures" @click="clickDefault">Default</span>
          <el-dropdown class="sortPrice" @command="handleCommand">
            <span class="el-dropdown-link">
              {{sortPrice}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">Price ↑</el-dropdown-item>
              <el-dropdown-item command="-1">Price ↓</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <!-- 中部左边 -->
        <el-aside width="200px" class="priceBlock">
          <div class="priceBlockTitle">PRICE:</div>
          <div
            class="priceBlockDetail"
            v-for="(item,index) in priceList"
            :key="index"
            @click="clickCurrent(item.min,item.max,index)"
            :class="index==isCurrent?'red':''"
          >{{item.min}}-{{item.max}}</div>
        </el-aside>
        <!-- 中部主体 -->
        <el-main>
          <div class="mainMain">
            <GoodsItem v-for="(item,index) in value.res" :key="index" :value="item" />
          </div>
          <el-pagination
            class="pagination"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSizes"
            @current-change="pageChange"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import GoodsItem from "../components/GoodsItem";
import priceList from "../../../assets/data/priceList";
import goods from "../../../models/goods";
import sortPrice from "../../../models/sortPrice";
export default {
  data() {
    return {
      sortPrice: "Price ↑",
      priceList: [],
      isCurrent: -1, //判断是否选中,
      value: [],
      offset: 0,
      limit: 8,
      pageSizes: 8,
      total: 10 //分页器总数
    };
  },
  components: {
    GoodsItem
  },
  async mounted() {
    this.priceList = priceList; //获取价格区间的数组
    // 获取商品信息
    const offset = this.offset;
    const limit = this.limit;
    var res = await goods({ offset, limit });
    this.value = res.data;
  },
  watch: {
    value: function(val) {
      this.total = val.total;
    }
  },
  methods: {
    async clickCurrent(min, max, index) {
      // 获取商品信息，通过价格区间
      this.offset = 0;
      const offset = this.offset;
      const limit = this.limit;
      var res = await goods({ min, max, offset, limit });
      this.value = res.data;
      this.isCurrent = index;
    },
    // 点击默认排序
    async clickDefault() {
      // 获取商品信息，默认排序
      this.offset = 0;
      const offset = this.offset;
      const limit = this.limit;
      var res = await goods({ offset, limit });
      this.value = res.data;
      this.isCurrent = -1; //使价格区间不选定
    },
    // 下拉菜单，通过价格升序降序
    async handleCommand(price) {
      this.offset = 0;
      const offset = this.offset;
      const limit = this.limit;
      if (price == 1) {
        this.sortPrice = "Price ↑";
      } else {
        this.sortPrice = "Price ↓";
      }
      var res = await sortPrice({ price, offset, limit });
      console.log(res);
      this.value = res.data;
      this.isCurrent = -1;
    },
    async pageChange(val) {
      console.log(val);
      // 获取商品信息
      this.offset = (val - 1) * 8;
      const offset = this.offset;
      const limit = this.limit;
      var res = await goods({ offset, limit });
      this.value = res.data;
    }
  }
};
</script>

<style scoped>
.navOption,
.main {
  width: 1200px;
  margin: 0 auto;
}
.mainNav {
  background-color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
}
.sortBody {
  margin-left: auto;
  font-size: 14px;
  color: #606266;
}
.sortPrice {
  margin-left: 20px;
}
.sortFeatures:hover {
  color: red;
}

.priceBlock {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.priceBlockTitle {
  font-weight: 800;
  margin-bottom: 20px;
}
.priceBlockDetail {
  margin: 10px 0;
}
.priceBlockDetail:checked {
  color: red;
}
.red {
  color: red;
}
.mainMain {
  padding-right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}
.pagination {
  margin: 0 auto;
  width: max-content;
}
</style>